<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-content
					style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;background: #ffffff !important;">
				<right-top icon="2.png" text="相似列表详情页">
					<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;"
					        size="small"
					        @change="callback">
						<a-tab-pane key="1" tab="事件数据"></a-tab-pane>
						<a-tab-pane key="2" tab="统计分析" force-render></a-tab-pane>
					</a-tabs>
				</right-top>
				<div class="right-content" v-show="change==1">
					<!--第一块-->
					<div style="" class="divOne">
						<div style="width: 95%;display: flex;justify-content: space-around;align-items: center">
							<div style="width: 75%;padding-left: 5%;">
								<div
										style="font-size: 16px;font-weight: bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: center;"
										:title="listInfo.title" id="infoTitle">{{ listInfo.title }}
								</div>
							</div>
							<div style="display: flex;width: 21%;">
								<!-- 情感极性 -->
								<img v-if="listInfo.emotionalPolarity == 3"
								     src="../../assets/images/system/jixing-fu.png"
								     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
								<img v-else-if="listInfo.emotionalPolarity == 2"
								     src="../../assets/images/system/jixing-zhong.png"
								     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
								<img v-else src="../../assets/images/system/jixing-zheng.png"
								     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>

								<img src="../../assets/images/generalDetection/6.png"
								     style="width: 25px;height: 20px;margin-top: 6%;"/>
								<span style="margin-top: 5%;font-size: 18px;margin-left: 1%;">{{ listInfo.number }}</span>
								<!-- 镜像 -->
								<img v-if="listInfo.mirrorAddress != null" title="镜像"
								     src="../../assets/images/system/jingxiang-1.png"
								     @click="jingxiang(listInfo.mirrorAddress)"
								     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;margin-top: 5%;margin-left: 7%;width: 25px;height:25px;"/>
								<img v-else title="镜像" src="../../assets/images/system/jingxiang-2.png"
								     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;margin-top: 5%;margin-left: 7%;width: 25px;height:25px;"/>
								<a-button style="width: 60px;margin-left: 3%;margin-top: 5%;" @click="goHomePage">
									返回
								</a-button>
							</div>
						</div>
						<div style="width: 100%;height: 45%;margin-top: 1%;">
							<div style="display: flex;">
								<div style="width: 20%;margin-left: 6%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
								     :title="listInfo.informationSources">发布媒体：{{ listInfo.informationSources }}
								</div>
								<div style="width: 20%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
								     :title="listInfo.author">作者：{{ listInfo.author }}
								</div>
								<div style="width: 20%;">级别推断：
									<span v-if="listInfo.levelInference ==3"
									      style="color: #FE3328;cursor:pointer">重要级别</span>
									<span v-else-if="listInfo.levelInference ==1"
									      style="color: #51AE43;cursor:pointer">一般级别</span>
									<span v-else-if="listInfo.levelInference ==2"
									      style="color: #5698FE;cursor:pointer">中等级别</span>
									<span v-else-if="listInfo.levelInference ==3"
									      style="color: #FF8746;cursor:pointer">重要级别</span>
								</div>
								<div style="width: 20%;">发布时间：{{ listInfo.releaseTime }}
									   
								</div>
								<div style="width: 20%;">
									<a style="color: #297BE9;"
									   :href="listInfo.url"
									   :title="listInfo.url"
									   target="_blank">查看原文>></a>
								</div>
							</div>
							<div style="display: flex;margin-top: 1%;">
								<div style="margin-left: 6%;width: 18.7%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
								     :title="listInfo.caseType">
									事件分类：{{ listInfo.caseType }}
								</div>
								<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
									转发量：{{ listInfo.forwardVolume }}
								</div>
								<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
									评论量：{{ listInfo.commentVolume }}
								</div>
								<div style="">访问量：{{ listInfo.visitVolume }}</div>
							</div>
							<div style="display: flex;margin-top: 1%">
								<div style="margin-left: 6%;">关键词：<span
										style="color: orange">{{ listInfo.keyword }}</span>
								</div>
							</div>
						</div>
					</div>
					<!--第二块-->
					<div style="padding-bottom: 3%;" class="divTwo">
						<div style="margin-left: 6%;width: 85%;">
							<img :src="listInfo.img" alt=""
							     style="padding-left: 20%;padding-top: 1%;padding-bottom: 1%;">
							<div style="padding-top: 1%;line-height: 30px;" id="infoContent"><span
									style="padding-left: 3%"></span>{{ listInfo.content }}
							</div>
						</div>
					</div>
					<!--第三块-->
					<!-- 镜像模态框 -->
					<a-modal class="modal-box2" v-model="visible2" title="镜像" width="1300px" @ok="hideModal3" ok-text="关闭"
					         style="height:500px" :cancel-button-props="{ style: { display: 'none' } }">
						<div class="modal-body2" style="overflow: unset;padding: 0px;height:564px">
							<iframe :src="mirrorUrl" style="height: 100%;width: 100%;" name="mirror"></iframe>
						</div>
					</a-modal>
				</div>
				<div class="right-content" v-show="change==2">
					<Statistics></Statistics>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {getEventTypeDetail} from '@/api/eventAnalyze/eventAnalyze'
import '@/utils/wordCloud'
import statistics from '@/views/eventAnalyze/eventAnalyzeStatistics.vue'

import {getSimilarDetail} from '@/api/eventAnalyze/eventAnalyzeResults'


export default {
	name: "similarListInfo",
	components: {
		left,
		rightTop,
		Statistics: statistics
	},
	data() {
		return {
			visible2: false,
			mirrorUrl: '',
			change: 1,
			listInfo: {}, //相似详情数据
			text: '', //标题
		}
	},
	props: {
		similarId: {
			type: Object,
		},
		parent: {
			type: Object,
		}
	},
	methods: {
		jingxiang(url) {
			this.mirrorUrl = url;
			this.visible2 = true;
		},
		// 返回按钮
		goHomePage() {
			this.parent.infoFlag = true;
			this.parent.similarInfoFlag = false;
		},

		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;
			}
		},
	},
	mounted() {
		let id = 0;
		if (this.listInfo.oneEventClass != null) {
			id = this.listInfo.oneEventClass
		}
		if (this.listInfo.twoEventClass != null) {
			id = this.listInfo.twoEventClass
		}
		if (this.listInfo.threeEventClass != null) {
			id = this.listInfo.threeEventClass
		}
		// 获取标题
		getEventTypeDetail({
			id: id
		}).then(res => {
			this.text = res.data.name
		});
		// 获取相识列表详情
		getSimilarDetail({
			id: this.similarId
		}).then(res => {
			this.listInfo = res.data
		})
	},


}
</script>

<style scoped lang="scss">

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	margin: 0 5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

input[type=checkbox]:checked + label:before { /*before为伪元素可以在元素之后添加内容*/
	display: block;
	/*	css3中的content字符编码*/
	content: "";
	/*	复选框里面的&radic;居中*/
	text-align: center;
	/*	复选框里面的&radic;大小*/
	font-size: 13px;
	/*	字体的颜色*/
	color: #3D8EF7;
	/*  复选框勾选后的背景颜色*/
	background: #3D8EF7;
	margin-left: 3px;
	margin-top: 3px;
	height: 10px;
	width: 10px;
}

input[type=checkbox] {
	visibility: hidden;
}

.checkboxClass {
	width: 18px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc; /*改变复选框的边框颜色也可以不要边框*/
	display: inline-block;
}

.topDiv {
	border-bottom: 1px solid #dcdcdc;
	width: 90%;
	height: 60px;
	margin-left: 5%;
	padding-left: 10px;
	line-height: 60px;
	display: flex
}

.titleDiv {
	height: 40px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin-left: 5%;
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.angle-wrapper:before {
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-right-color: #eeeeee;
	position: absolute;
	left: calc(-2% - 5px);
	top: 50%;
	margin-top: -12px;
}

.angle-wrapper:after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FFFFFF;
	position: absolute;
	left: calc(-2% - 1px);
	top: 50%;
	margin-top: -10px;
}

.angle-wrapper {
	width: 93%;
	height: 40px;
	position: relative;
	border: 2px solid #eeeeee;
	margin-left: 2%;
	background-color: white;
	line-height: 30px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.angle-wrapper-bottom {
	display: flex;
	margin-top: 5px;
	justify-content: space-between;
	width: 70%;
	font-size: 12px;
	margin-left: 4%
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

/deep/ .ant-table-tbody > tr:nth-child(even) {
	background-color: #FAFAFA;
}

/deep/ .ant-table-tbody > tr > td {
	border: 0;
}

/deep/ .ant-table-thead > tr > th {
	background-color: white;
	font-weight: bold;
}

.ant-btn-primary {
	color: #ffffff;
}
</style>
